<template>
  <div class="app-container">
    <div>
      <div>
        <table>
          <tr>
            <td>案件名称:</td>
            <td>
              <el-input
                v-model="listQuery.case_name"
                placeholder="请输入案件名称"
                style="width: 200px"
              />
            </td>
            <td>案件阶段:</td>
            <td>
              <el-select
                v-model="listQuery.case_step"
                filterable
                clearable
                style="width: 100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in option_case_step"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </td>
            <td>创建时间:</td>
            <td>
              <el-date-picker
                v-model="listQuery.case_time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 250px"
              />
            </td>
            <td>关键字:</td>
            <td>
              <el-input
                v-model="listQuery.case_keyword"
                placeholder="从系统案号、法院案号、案件名称、客户名称中模糊搜索"
                style="width: 200px"
                title="从系统案号、法院案号、案件名称、客户名称中模糊搜索"
              />
            </td>
            <td>
              <el-button type="primary" size="small" @click="getList">搜索</el-button>
            </td>
          </tr>
        </table>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        :header-cell-style="{ background: '#F5F5F5', color: '#000' }"
        style="width: 100%"
        @cell-dblclick="copyCellContent"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column align="center" width="120" label="案件编号" fixed>
          <template slot-scope="scope">
            <router-link :to="'/case/lawsuit/civil/edit/' + scope.row.id">
              <span style="color: green">{{ scope.row.case_code }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" width="100" label="案件阶段">
          <template slot-scope="scope">
            <span>{{ scope.row.case_step | formatCaseStep }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          width="280"
          label="案件名称"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.case_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          width="250"
          label="原告"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.case_plaintiff_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          width="250"
          label="被告"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.case_defendant_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          width="180"
          label="法院"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.three_court !== '' && scope.row.three_case_code !== ''">
              {{ scope.row.three_court }}
            </span>
            <span
              v-else-if="scope.row.two_court !== '' && scope.row.two_case_code !== ''"
            >
              {{ scope.row.two_court }}
            </span>
            <span v-else>{{ scope.row.one_court }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          width="200"
          label="法院案号"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.three_court !== '' && scope.row.three_case_code !== ''">
              {{ scope.row.three_case_code }}
            </span>
            <span
              v-else-if="scope.row.two_court !== '' && scope.row.two_case_code !== ''"
            >
              {{ scope.row.two_case_code }}
            </span>
            <span v-else>{{ scope.row.one_case_code }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="this.loginType === 1" align="center" label="诉讼标的">
          <template slot-scope="scope">
            <span>{{ scope.row.civil_object }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="this.loginType === 1" align="center" label="获赔金额">
          <template slot-scope="scope">
            <span>{{ scope.row.judgment_or_mediation_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="this.loginType === 1" align="center" label="承办律师">
          <template slot-scope="scope">
            <span>{{ scope.row.handling_lawyer }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="this.loginType === 1" align="center" label="调查员">
          <template slot-scope="scope">
            <span>{{ scope.row.case_investigator }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="100" label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.case_created_date | formatDateFormatYMD }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div class="actionClass">
              <router-link :to="'/case/lawsuit/civil/edit/' + scope.row.id">
                <span>编辑</span>
              </router-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px">
        <el-button type="primary" size="mini" @click="exportCase()">导出案件</el-button>
        <el-button type="primary" size="mini">导出民事起诉状</el-button>
        <el-button type="primary" size="mini">导出授权委托书</el-button>
      </div>

      <pagination
        v-show="total > 0"
        :limit.sync="listQuery.pageSize"
        :page.sync="listQuery.pageIndex"
        :total="total"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { CaseList } from "@/api/case";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { formatDate } from "@/utils/date";
import store from "@/store";

const option_case_step = [
  { value: 1, label: "等待公证书" },
  { value: 2, label: "审核公证书" },
  { value: 3, label: "新案待分配" },
  { value: 4, label: "文书准备" },
  { value: 5, label: "等待立案" },
  { value: 6, label: "补充取证" },
  { value: 10, label: "提交立案" },
  { value: 13, label: "一审立案受理" },
  { value: 14, label: "一审补充证据" },
  { value: 15, label: "一审准备开庭" },
  { value: 16, label: "一审再次开庭" },
  { value: 17, label: "一审庭后待判" },
  { value: 20, label: "一审等待上诉" },
  { value: 21, label: "一审待执行" },
  { value: 22, label: "一审上诉准备" },
  { value: 23, label: "一审补充代理意见" },
  { value: 24, label: "一审和解中" },
  { value: 25, label: "一审和解结案" },
  { value: 26, label: "二审立案受理" },
  { value: 27, label: "二审补充证据" },
  { value: 28, label: "二审通知开庭" },
  { value: 31, label: "二审再次开庭" },
  { value: 32, label: "二审庭后待判" },
  { value: 33, label: "二审待执行" },
  { value: 38, label: "二审补充代理意见" },
  { value: 39, label: "二审和解中" },
  { value: 41, label: "二审和解结案" },
  { value: 42, label: "再审立案受理" },
  { value: 44, label: "再审补充证据" },
  { value: 45, label: "再审通知开庭" },
  { value: 46, label: "再审庭后待判" },
  { value: 47, label: "再审待执行" },
  { value: 48, label: "再审和解中" },
  { value: 49, label: "再审和解结案" },
  { value: 50, label: "执行立案" },
  { value: 51, label: "执行受理" },
  { value: 52, label: "执行中止" },
  { value: 53, label: "执行结案" },
  { value: 99, label: "执行终本" },
  { value: 100, label: "案件作废" },
];

export default {
  name: "CivilLawsuitList",
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger",
      };
      return statusMap[status];
    },
    formatDateFormatYMD(time) {
      const date = new Date(parseInt(time));
      return formatDate(date, "yyyy-MM-dd");
    },
    formatCaseStep(case_step) {
      return (option_case_step.find((item) => item.value === case_step) || { label: "" })
        .label;
    },
  },
  data() {
    return {
      loginType: store.getters.loginType,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        case_category: 2, // 案件种类(1-非诉讼案件，2-民事争议，3-刑事案件)
        case_name: "",
        case_step: 0,
        case_time: [],
        case_keyword: "",
        pageIndex: 0,
        pageSize: 10,
      },
      option_case_step: [
        { value: 1, label: "等待公证书" },
        { value: 2, label: "审核公证书" },
        { value: 3, label: "新案待分配" },
        { value: 4, label: "文书准备" },
        { value: 5, label: "等待立案" },
        { value: 6, label: "补充取证" },
        { value: 10, label: "提交立案" },
        { value: 13, label: "一审立案受理" },
        { value: 14, label: "一审补充证据" },
        { value: 15, label: "一审准备开庭" },
        { value: 16, label: "一审再次开庭" },
        { value: 17, label: "一审庭后待判" },
        { value: 20, label: "一审等待上诉" },
        { value: 21, label: "一审待执行" },
        { value: 22, label: "一审上诉准备" },
        { value: 23, label: "一审补充代理意见" },
        { value: 24, label: "一审和解中" },
        { value: 25, label: "一审和解结案" },
        { value: 26, label: "二审立案受理" },
        { value: 27, label: "二审补充证据" },
        { value: 28, label: "二审通知开庭" },
        { value: 31, label: "二审再次开庭" },
        { value: 32, label: "二审庭后待判" },
        { value: 33, label: "二审待执行" },
        { value: 38, label: "二审补充代理意见" },
        { value: 39, label: "二审和解中" },
        { value: 41, label: "二审和解结案" },
        { value: 42, label: "再审立案受理" },
        { value: 44, label: "再审补充证据" },
        { value: 45, label: "再审通知开庭" },
        { value: 46, label: "再审庭后待判" },
        { value: 47, label: "再审待执行" },
        { value: 48, label: "再审和解中" },
        { value: 49, label: "再审和解结案" },
        { value: 50, label: "执行立案" },
        { value: 51, label: "执行受理" },
        { value: 52, label: "执行中止" },
        { value: 53, label: "执行结案" },
        { value: 99, label: "执行终本" },
        { value: 100, label: "案件作废" },
      ],
      dialogChangeContractStatusFormVisible: false,
      changeContractStatusForm: {
        contract_id: 0,
        contract_status: "0",
      },
      multipleSelection: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    judgeContractDialog(obj) {
      this.dialogChangeContractStatusFormVisible = true;
      this.changeContractStatusForm.contract_id = obj.row.id;
      this.changeContractStatusForm.contract_status = obj.row.contract_status.toString();
    },
    getList() {
      const that = this;
      that.listLoading = true;
      if (that.listQuery.case_step === "") {
        that.listQuery.case_step = 0;
      }
      CaseList(that.listQuery)
        .then((response) => {
          that.list = response.data;
          that.total = response.page_count;
          that.listLoading = false;
          if (that.listQuery.case_step === 0) {
            that.listQuery.case_step = "";
          }
        })
        .catch(() => {
          that.list = [];
          that.listLoading = false;
          if (that.listQuery.case_step === 0) {
            that.listQuery.case_step = "";
          }
        });
    },
    copyCellContent(row, column, cell, event) {
      const that = this;
      console.log(row, column, cell.innerText, event);
      that.$copyText(cell.innerText).then(
        function (e) {
          that.$notify({
            title: "成功",
            message: "内容已复制到剪切板！",
            type: "success",
            duration: 2000,
          });
        },
        function (e) {
          that.$notify({
            title: "成功",
            message: "抱歉，复制失败！",
            type: "success",
            duration: 2000,
          });
        }
      );
    },
    exportCase() {
      alert("有选中的数据则导出指定数据，没有的话，则根据条件导出");
      console.log(this.multipleSelection)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style>
.el-input__inner {
  height: 30px;
}

.el-input__icon {
  line-height: 30px !important;
}

.el-date-editor .el-range__icon,
.el-input__icon,
.el-date-editor .el-range-separator {
  line-height: 20px !important;
}

.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.actionClass span,
.action_dropdown span {
  color: #409eff;
}

.el-table {
  font-size: 13px;
}

.el-table th,
.el-table td {
  padding: 5px 0;
}
</style>
